<template>
  <div>
    <el-dialog title="新增工单" :visible="visible" :before-close="close" >
  <el-form ref="form" label-width="120px" size="mini" :rules='rules' :model='form'>
   <el-form-item label="设备编号："  prop='innerCode'>
        <el-input style="width:80%;hight:46px" placeholder="请输入" v-model='form.innerCode'/>
      </el-form-item>
  <el-form-item label="工单类型："  prop="productType">
    <el-select  placeholder="请选择" style="width:80%" v-model='form.productType'>
      <el-option  v-for='item in type' :key='item.typeId'
      :label="item.typeName" 
      :value="item.typeId"></el-option>
    </el-select>
  </el-form-item>
  
  <el-form-item label="运营人员：" prop="userName">
    <el-select  placeholder="请选择" style="width:80%" v-model='form.userName' >
      <el-option 
      label="无数据" value="哈哈哈"
     ></el-option>
    </el-select>
  </el-form-item>
   <el-form-item label="备注：" style="width:83%;hight:46px" prop='desc'>
    <el-input placeholder="请输入备注(不超过40字)" type='textarea' v-model='form.desc'></el-input>
  </el-form-item>
</el-form>
  <div slot="footer" class="dialog-footer">
    <el-button @click='close'>取 消</el-button>
    <el-button type="primary" @click='submit'>确 定</el-button>
  </div>
</el-dialog>
    
  </div>
</template>

<script>
import {gettype,creatorder,username} from '@/api/order'
export default {
  name: 'HrsaasAdd',
  props:{
    visible:{
      type:Boolean,
      default:true
    }
  },
  data() {
    return {
      form:{
        userName:'',
        createType:1,
        innerCode:'',
        userId:1,
        productType:'',
        desc:'',
        details:[]
      },
      type:[],
      rules:{
        innerCode:[
          {required:true,message:'请输入',trigger:'blur'},
          {min:1,max:15,message:'不符合规范',trigger:'blur'}
        ],
        productType:[
          {required:true,message:'请选择',trigger:'blur'}
        ],
        userName:[
          {required:true,message:'请选择',trigger:'blur'}
        ],
        desc:[
          {required:true,message:'请输入',trigger:'blur'},
          {min:1,max:40,message:'不符合规范',trigger:'blur'}
        ],
      }
    };
  },
  // 监视form变淡数据的变化
 watch:{
    form(newVal){
      this.form.productType = newVal.productTypeId
    }
  }, 
  mounted() {
    this.gettype()
    // this.username()
  },

  methods: {
    close(){
      this.$emit('update:visible',false)
      this.$refs.form.resetFields()
      this.form={}
      console.log(this.form,'为什么清空不生效,生效啦');
    },
    async submit(){
      await this.$refs.form.validate()
      const res=await creatorder(this.form)
      console.log(res,'新增成功了吗');
      this.$message.success('新增成功')
      this.close()
      // this.$emit('update:visible',false)
      this.$refs.form.reserFileds()
      this.form={}
      this.$parents.getList()
    },
    // 获取工单类型
  async gettype(){
  const res = await gettype()
  console.log(res,'能获取工单类型吗');
  this.type=res
  // map返回一个新数组
  // this.type=res.map(ele=>ele.typeName)
  // console.log(this.type,'type是啥');
},
// // 获取运营人员
// async username(){
//   const res = await username()
//   console.log(res,'是运营人员的结果吗');
// }
  },
};
</script>

<style lang="scss" scoped>
// .color{
//   background-color: #fff;
// }
</style>